<template>
    <div class="list">
      <van-sidebar v-model="activeKey" >
          <van-sidebar-item
          v-for="item in Categories"
          :key="item.id"
          :title="item.name"
          :to="'/list/sub/' + item.id"
          />
      </van-sidebar>
      <div>
        <router-view></router-view>
      </div>
    </div>
</template>
<script>
import { getCategories } from '@/api/home'
export default {
  name: 'List',
  data () {
    return {
      activeKey: 0,
      Categories: []
    }
  },
  created () {
    // 查询所有的分类数据
    getCategories()
      .then(res => {
        this.Categories = res.list.slice(1)
        // 下一次 DOM 更新循环结束执行回调函数 callback
        this.$nextTick(() => {
          // 跳转到第一项的子分类页面中 : 编程式导航
          this.$router.push(`/list/sub/${this.Categories[0].id}`)
        })
      })
  }
}
</script>

<style lang="less" scoped>
.list {
  display: flex;
  .van-sidebar{
    flex-shrink: 0;
  }
}
</style>
